<template>
  <view
    class="form-selector-picker custom-comp"
    :class="[getDisabled && 'is-disabled', getBorder && 'is-border']"
  >
    <picker
      mode="selector"
      :disabled="getDisabled"
      style="flex: 1"
      :range="rangeList"
      range-key="text"
      :value="getPickerValue"
      @change="pickerChange"
    >
      <slot v-if="useSlotsContent" name="content"></slot>
      <PickerValue
        v-else
        :placeholder="getPlaceholder"
        :valueText="valueText"
        :disabled="getDisabled"
        :icon="valueText && !getDisabled ? '\ue724' : icon"
        :icon-style="
          valueText && !getDisabled
            ? {
                color: 'rgb(192, 196, 204)',
                fontSize: '40rpx',
              }
            : {
                fontSize: '30rpx',
              }
        "
        @icon-click="handleClear"
      />
    </picker>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { useFormItem } from '../hooks/useContext';
  import { computed, type PropType, ref, unref, useSlots } from 'vue';
  import PickerValue from './PickerValue.vue';
  import type { Localdata } from '../types';
  import { isBoolean } from '@/utils/is';
  import { isNumber } from 'lodash-es';

  const props = defineProps({
    modelValue: [String, Number],
    placeholder: propTypes.string.def('请选择'),
    disabled: propTypes.bool.def(false),
    border: {
      type: Boolean,
      default: undefined,
    },
    localdata: {
      type: Array as PropType<Localdata[]>,
      default: () => [],
    },
    clear: propTypes.bool.def(false),
    icon: propTypes.string.def('\ue8f2'),
  });

  const emit = defineEmits(['update:modelValue', 'change']);

  const { getProps: FormItemProps, setFormModel, formProps, component } = useFormItem(props);

  const getBorder = computed(() => {
    return isBoolean(props.border) ? props.border : !formProps?.border;
  });

  const getProps = computed(() => unref(FormItemProps) || props);

  const getPlaceholder = computed(() => {
    return getProps.value.placeholder;
  });

  const getPickerValue = computed(() => {
    const { modelValue, localdata, itemDefault } = getProps.value;
    const mVal = modelValue
    const list = localdata as Localdata[];
    const index = list.findIndex((v) => {
      let val = isNumber(v.value) ? v.value.toString() : v.value;
      return val === mVal?.toString();
    });
    valueText.value = list[index]?.text;

    return index === -1 ? 0 : index;
  });

  const valueText = ref('');

  const getDisabled = computed(() => getProps.value.disabled);

  const rangeList = computed(() => getProps.value.localdata);

  function pickerChange(e: { detail: { value: number } }) {
    const index = e.detail.value;
    const { localdata } = getProps.value;
    const list = localdata as Localdata[];
    if (list && list.length) {
      const val = list[index];
      valueText.value = val.text;
      setFormModel(val.value);
      emit('update:modelValue', val.value);
      emit('change', val.value);
    }
  }

  const useSlotsContent = !!useSlots().content;

  /** 清空 */
  function handleClear() {
    if (unref(valueText) && !getDisabled.value) {
      const value = '';
      valueText.value = value;
      setFormModel(value);
      emit('update:modelValue', value);
      emit('change', value);
    }
  }
</script>

<style lang="scss" scoped>
  @import '../styles/form.scss';
</style>
